<template>
  <el-button type="primary" @click="AddPermission">新增</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="permissionName" label="权限名"  />
    <el-table-column fixed prop="" label="路由"  />
    <el-table-column fixed="right" label="操作" >
      <template #default>
        <el-button link type="primary" size="small" @click="">删除</el-button>
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="新增权限" width="500">
    <el-form :model="form">
      <el-form-item label="权限名" >
        <el-input v-model="form.permissionName"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="AddPermissionsinfo()">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive,  onMounted } from "vue";
import { ElMessage} from "element-plus";
import { GetPermissions,AddPermissions } from "@/api/RBACMain/rbac";
const tableData = ref([])
onMounted(()=>{
  GetPermission();
})
//获取角色信息
const GetPermission=()=>{
  GetPermissions().then((res)=>{
    tableData.value=res.data;
  })
}
const dialogFormVisible = ref(false)
const form = reactive({
  permissionName:'',
})
const AddPermission=()=>{
  dialogFormVisible.value=true;
}

const AddPermissionsinfo=()=>{
  AddPermissions(form).then((res)=>{
    if(res.code==200){
      ElMessage.success(res.msg)
      dialogFormVisible.value=false;
      GetPermission();
    }else{
      ElMessage.error(res.msg)
    }
  })
}
</script>
